<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <!-- 年份书籍数量-->
    <div id="yearBookNum" style="width: 600px;height:400px; margin: 0 auto;"></div>
    <!--作者书籍数量-->
    <div id="authorBookNum" style="width: 600px;height:600px; margin: 0 auto;"></div>
    <!--作者作品评分-->
    <div id="ratingScore" style="width: 600px;height:600px; margin: 0 auto;"></div>

    <!--出版社书籍数量-->
    <div id="publisherBookNum" style="width: 600px;height:400px; margin: 0 auto;"></div>
    <!--金额范围-->
    <div id="priceScope" style="width: 800px;height:400px; margin: 0 auto;"></div>

    <script type="text/javascript">
        var yearBookNumChart = echarts.init(document.getElementById('yearBookNum'));

        yearBookNumOption = {
            color: ['#3398DB'],
            title: {
                text: '年份书籍数量'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };

        $.ajax({
            url:"/statistics/publisherYearBookNum",
            type:"get",
            success:function (res) {
                if(res.success){
                    console.log(res);
                    yearBookNumOption.xAxis.data = res.object.publisherYearList;
                    yearBookNumOption.series[0].data = res.object.bookNumList;
                    // 使用刚指定的配置项和数据显示图表。
                    yearBookNumChart.setOption(yearBookNumOption);
                }
            }
        });

    </script>

    <script>
            var authorBookNumChart = echarts.init(document.getElementById('authorBookNum'));
            authorBookNumOption = {
                color: ['#3398DB'],
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '2%',
                    top: '10%',
                    containLabel: true,
                },
                title: {
                    text: '作者书籍数量'
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };

            $.ajax({
                url:"/statistics/authorBookNumSort",
                type:"get",
                success:function (res) {
                    if(res.success){
                        console.log(res);
                        res.object.authorNameList.reverse();
                        res.object.bookNumList.reverse();
                        authorBookNumOption.yAxis.data = res.object.authorNameList;
                        authorBookNumOption.series[0].data = res.object.bookNumList;
                        authorBookNumChart.setOption(authorBookNumOption);
                    }
                }
            });

    </script>

    <script>
            var ratingScoreChart = echarts.init(document.getElementById('ratingScore'));
            ratingScoreOption = {
                color: ['#3398DB'],
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '2%',
                    top: '10%',
                    containLabel: true,
                },
                title: {
                    text: '作者作品平均评分'
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '1', '2', '3', '4']
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };
            $.ajax({
                url:"/statistics/authorRatingScoreSortBookNum",
                type:"get",
                success:function (res) {
                    if(res.success){
                        console.log(res);
                        res.object.authorNameList.reverse();
                        res.object.ratingScoreAvgList.reverse();
                        ratingScoreOption.yAxis.data = res.object.authorNameList;
                        ratingScoreOption.series[0].data = res.object.ratingScoreAvgList;
                        // 使用刚指定的配置项和数据显示图表。
                        ratingScoreChart.setOption(ratingScoreOption);
                    }
                }
            });


    </script>

    <script>
        var publisherBookNumChart = echarts.init(document.getElementById('publisherBookNum'));
        publisherBookNumOption = {
            color: ['#3398DB'],
            grid: {
                left: '2%',
                right: '4%',
                bottom: '2%',
                top: '10%',
                containLabel: true,
            },
            title: {
                text: '出版社书籍数量'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '1', '2', '3', '4'],
                axisLabel: {
                color: '#333',
                //  让x轴文字方向为竖向
			    interval: 0,
                formatter: function(value) {
                return value.split('').join('\n')
                }
          }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };

        $.ajax({
            url:"/statistics/publisherBookNumSort",
            type:"get",
            success:function (res) {
                if(res.success){
                    console.log(res);
                    publisherBookNumOption.xAxis.data = res.object.publisherNameList;
                    publisherBookNumOption.series[0].data = res.object.bookNumList;
                    // 使用刚指定的配置项和数据显示图表。
                    publisherBookNumChart.setOption(publisherBookNumOption);
                }
            }
        });

    </script>

    <script>
        var priceScopeChart = echarts.init(document.getElementById('priceScope'));
        priceScopeOption = {
            color: ['#3398DB'],
            grid: {
                left: '2%',
                right: '4%',
                bottom: '2%',
                top: '10%',
                containLabel: true,
            },
            title: {
                text: '书籍价格范围'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '1', '2', '3', '4'],
                axisLabel: {
                    color: '#333'
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };

        $.ajax({
            url:"/statistics/priceScope",
            type:"get",
            success:function (res) {
                if(res.success){
                    console.log(res);
                    priceScopeOption.xAxis.data = res.object.priceScopeNameList;
                    priceScopeOption.series[0].data = res.object.countNumList;
                    // 使用刚指定的配置项和数据显示图表。
                    priceScopeChart.setOption(priceScopeOption);
                }
            }
        });

    </script>
</body>

</html>